<template>
	<!-- 会员中心 -->
	<view class="memberCenter">
		<!-- style="background-image: url(../../static/icon/my-bg.png);"  style="background: url(../../static/icon/my-bg.png);" :style="'background-image: url('+images+');'"-->
		<view class="memberCenter_bg color_ff border-rs20">
			<image src="../../static/icon/my-bg.png" mode="widthFix" class="bgImg"></image>
			<view class="" style="margin-bottom: 30rpx;">
				<x-spaceBetween :betweenLeft='"T0/"+vip_level' betweenRight="会员福利>" @vip="vip" />
			</view> <!-- 进度条 -->
			<view class="" style="margin-bottom: 20rpx;">
				<u-line-progress active-color="#FF9950" inactive-color='#ececec' :show-percent='false'
					:percent="(100/5)*(userinfo.vip_level+1)" height="10">
				</u-line-progress>
			</view>
			<view class="color_5s140" style="margin-bottom: 66rpx;" v-if="userinfo.vip_level!=4">
				再获得{{data.next_vip_integral}}积分即可升至{{vip_dengji}}
			</view>
			<view class="" style="color: #FFFFFF;">
				当前积分：{{data.integral}}
			</view>


		</view>
		<!-- 每日签到 -->
		<view class="" style="margin: 60rpx 0rpx;">
			<view class="" style="margin-bottom: 28rpx;">
				每日签到得{{data.tomorrow_integral}}积分
			</view>
			<!-- 			<view class="" style="margin-bottom: 30rpx;">
				每日签到-8月
			</view>
			<view class="" style="margin-bottom: 40rpx;height: 100rpx;width: 100%;border: 1px solid red;">
			</view> -->
			<view class="tbody pg-30 bgColor-white border-rs20 box-shadow-g zdTxtBox">
				<view class="">当月已签到<text class="color-zt">{{data.this_month_sign.length}}</text>天</view>
				<view class="font-26 textColor666 mt-10">{{getTiem}}</text></view>
				<view class="d-flex aling-centen flex-w  jfy-sb mt-20">
					<view class=" mt-10 Sigin-item" :class="statusColor(index)==1?'actve':''"
						v-for="(item,index) in parseInt(data.this_days)" :key='index'>
						<text>{{index | textSum}}</text>
					</view>
				</view>
			</view>
			<button type="default" :class="gitupbool==true ? 'gittrue' : 'gitfalse'"
				@click="gitup">{{qiandaoStatus}}</button>
		</view>
		<!-- 会员任务升级 -->
		<view class="" style="margin-top: 60rpx;margin-bottom: 100rpx;">
			<view class="" style="margin-bottom: 130rpx;">
				会员升级任务
			</view>
			<view class="">
				<x-timeaxis :dataArray="dataArray"></x-timeaxis>
			</view>
			<view class="">
				<u-line color="info" border-style="solid" />
				<view class="d-flex-ybetween">
					<view class="" @click="gitupbool && vip()">
						<view class="" style="margin: 22rpx 0rpx 20rpx;" v-if="!gitupbool">
							我的会员日
						</view>
						<view class="" style="margin: 22rpx 0rpx 20rpx;" v-if="gitupbool">
							查看会员福利
						</view>
						<view class="" style="margin-bottom: 12rpx;color: #B9B9B9;">
							在会员日当日购买商品可获得双倍积分
						</view>
					</view>
					<view class="d-flex-yCenter-ju">
						<view class="" style="margin-right: 32rpx;">
							周{{userinfo.day}}
						</view>
						<view class="">
							<image src="../../static/icon/right_jian.png" mode="" style="width: 14rpx;height: 24rpx;">
							</image>
						</view>
					</view>

				</view>
				<u-line color="info" border-style="solid" />
			</view>
			<view class="d-flex-yCenter-sb" style="padding: 34rpx 0rpx 40rpx;" @click="vipPolicy">
				<view class="">
					查看会员制度
				</view>
				<view class="">
					<image src="../../static/icon/right_jian.png" mode="" style="width: 14rpx;height: 24rpx;">
					</image>
				</view>
			</view>
			<u-line color="info" border-style="solid" />
		</view>
	</view>
</template>
<script>
	import {
		http_member_is_sign,
		http_member_sign_up
	} from '@/config/apiRouter.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		filters: {
			textSum(e) {
				var data = parseInt(e) + 1
				return data < 10 ? '0' + data : data
			},
		},
		data() {
			return {
				data: { 
					"integral": '',
					"num": '',
					"tomorrow_integral": '',
					"is_sign": '',
					this_days: 0,
					this_month_sign: []
				},
				gitupbool: false, //未签到
				dataArray: [{
					title: 'T0/普通会员',
					radingChange: '已达标',
					content: '您已成为普通会员',
					active: true,
					color: '#05B301'
				}, {
					title: 'T1/银卡会员',
					radingChange: '正在进行中...',
					content: '任务达成后您将晋升为银卡会员',
					content1: '任务要求：半年累定500积分或邀请5人注册',
					active: false,
					color: '#EC1701'
				}, {

					title: 'T2/金卡会员',
					radingChange: '待解锁',
					content: '任务达成后您将晋升为金卡会员',
					content1: '任务要求：半年累定1000积分或邀请15人注册/5人成为银卡会员',
					active: false,
					color: '#000000'
				}, {

					title: 'T3/白金会员',
					radingChange: '待解锁',
					content: '任务达成后您将晋升为白金会员',
					content1: '任务要求：半年累定2000积分或邀请20人注册/5人成为金卡会员',
					active: false,
					color: '#000000'
				}, {

					title: 'T4/合伙人会员',
					radingChange: '待解锁',
					content: '任务达成后您将晋升为合伙人会员',
					content1: ' 任务要求：半年累定4000积分或邀请50人注册/5人成为金卡会员',
					active: false,
					color: '#000000'
				}, ]
			}
		},
		computed: {
			...mapGetters(['userinfo']),
			vip_level() {
				switch (this.userinfo.vip_level) {
					case 0:
						return '普通会员'
					case 1:
						return '银卡会员'
					case 2:
						return '金卡会员'
					case 3:
						return '铂金会员'
					case 4:
						return '合伙人'
					default:
						return '异常状态'
				}
			},
			vip_dengji() {
				switch (this.userinfo.vip_level) {
					case 0:
						return '银卡会员'
					case 1:
						return '金卡会员'
					case 2:
						return '铂金会员'
					case 3:
						return '合伙人'
					default:
						return '异常状态'
				}
			},
			getTiem() {
				let date = new Date();
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? "0" + MM : MM;
				return y + "-" + MM
			},
			qiandaoStatus() {
				if (this.data.is_sign) {
					this.gitupbool = !this.gitupbool;
					return '已签到'
				} else {
					return '立即签到'
				}
			}
		},
		onLoad() {
			//获取签到信息
			this.httpdata();
			this.vipsLIst(this.userinfo.vip_level); //判断等级  
		},
		methods: {
			vipsLIst(index) {
				let dengji = this.vip_level;
				console.log(dengji, '等级')
				console.log(index, '等级id')
				this.dataArray.forEach((item1, index1) => {
					console.log(item1, 'item1');
					if (this.userinfo.vip_level > index1) {
						item1.radingChange = "已达标";
						item1.active = true;
						item1.color = '#05B301';
						item1.content1 = "";
						if (index1 == 0) {
							item1.content = "您已成为" + 'T0/普通会员';
						} else if (index1 == 1) {
							item1.content = "您已成为" + 'T1/银卡会员';
						} else if (index1 == 2) {
							item1.content = "您已成为" + 'T2/金卡会员';
						} else if (index1 == 3) {
							item1.content = "您已成为" + 'T3/白金会员';
						} else if (index1 == 4) {
							item1.content = "您已成为" + 'T4/合伙人会员';
						}
					}
				})
				// 当前会员等级
				this.dataArray[index].radingChange = "已达标";
				this.dataArray[index].content = "您已成为T" + index + '/' + dengji;
				this.dataArray[index].content1 = "";
				this.dataArray[index].active = true;
				this.dataArray[index].color = '#05B301';
				// 下一个会员等级
				if (index + 1 <= this.dataArray.length) {
					this.dataArray[index + 1].radingChange = "正在进行中...";
					this.dataArray[index + 1].content = "任务达成后您将晋升为" + this.userinfo.next_vip_level.title;
					this.dataArray[index + 1].content1 = "任务要求：" + this.userinfo.next_vip_level.days + "天邀请达标人数" + this
						.userinfo.next_vip_level.num + '人或达标积分' + this.userinfo.next_vip_level.integral;
					this.dataArray[index + 1].active = true;
					this.dataArray[index + 1].color = '#EC1701';
				}
			},
			// 获取签到信息
			httpdata() {
				http_member_is_sign().then(res => {
					this.data = res.data
				})
			},
			// 显示处理
			statusColor(e) {
				const dataarr = this.data.this_month_sign
				var data = parseInt(e) + 1
				data = data < 10 ? '0' + data : data
				for (let i = 0; i < dataarr.length; i++) {
					var tiem = dataarr[i].create_at
					var date = new Date(tiem * 1000)
					var d = date.getDate();
					d = d < 10 ? "0" + d : d;
					if (data == d) {
						return 1
						break
					}
				}
			},
			// 点击签到
			gitup() {
				if (this.data.is_sign) return
				http_member_sign_up().then(res => {
					uni.showToast({
						title: res.msg
					})
					setTimeout(() => {
						this.httpdata()
					}, 800)
				})
			},
			// 查看会员福利
			vip() {
				uni.navigateTo({
					url: '../memberBenefits/memberBenefits'
				})
			},
			vipPolicy() {
				uni.navigateTo({
					url: '../MembershipPolicy/MembershipPolicy'
				})
			}
		}
	}
</script>
<style lang="scss">
	.bgImg {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: -1;
		height: 100%;
	}

	.memberCenter {
		margin: 20rpx 30rpx 0rpx;

		.memberCenter_bg {
			padding: 30rpx 30rpx 38rpx;
			width: 690rpx;
			// height: 300rpx; 
			// background: url(../../static/icon/my-bg.png);
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.gittrue {
			//签到
			background: #D4D4D4;
			border: 1px solid #A0A0A0;
			border-radius: 6px;
			font-weight: 500;
			color: #FFFFFF;
		}

		.gitfalse {
			//未签到
			background: #FFFFFF;
			border: 1px solid #000000;
			border-radius: 6px;
			font-weight: 500;
			color: #000000;
		}
	}

	.tbody {
		margin-bottom: 30rpx;

		.sigin-in {
			background: #F8F6F9;
		}

		.Sigin-item {
			border: 1rpx solid #ddd;
			color: #333;
			border-radius: 10rpx;
			width: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.Sigin-item.actve {
			transition: all 0.3s;
			background: linear-gradient(top, #EE810A 0%, #FF890F 100%);
			color: #fff;
		}

		.Sigin-item.errActve {
			background: #ddd;
			// color: #ddd;
		}
	}
</style>
